// 封装函数-渲染信息
async function render() {
    const res = await axios({
        url: 'http://localhost:3000/result',
        method: 'get'
    })
    console.log(res)
    let i = 1
    const html = res.data.map(v => {
        return `
            <tr data-id="${v.id}">
                <th scope="row">${i++}</th>
                <td>${v.sname}</td>
                <td>${v.subject}</td>
                <td>${v.sage}</td>
                <td>${v.sgender}</td>
                <td>${v.qualifications}</td>
                <td>
                    <button type="button" class="btn btn-danger">删除</button>
                    <button type="button" class="btn btn-primary">编辑</button>
                </td>
            </tr>
        `
    }).join('')
    document.querySelector('tbody').innerHTML = html
}
render()

// 添加学员
document.querySelector('.btn-success').addEventListener('click', () => {
    // 通过serialize来获取表单元素
    const form = document.querySelector('.form')
    const data = serialize(form, { hash: true, empty: true })
    // console.log(data)
    const { sname, subject, sage, qualifications, sgender } = data
    // 判断是否为空
    if (sname === '' || subject === '' || sage === '' || qualifications === '' || sgender === '') {
        alert('请将内容填写完整')
        return
    }
    add()
    form.reset()
})

// 封装函数-添加学员
async function add() {
    const form = document.querySelector('.form')
    const data = serialize(form, { hash: true, empty: true })
    console.log(data)
    const res = await axios({
        url: 'http://localhost:3000/result',
        method: 'post',
        data
    })
    render()
}

// 删除学员
document.querySelector('tbody').addEventListener('click', (e) => {
    if (e.target.classList.contains('btn-danger')) {
        const id = e.target.parentNode.parentNode.dataset.id
        if (confirm('您确认要删除吗？')) {
            del(id)
            alert('删除成功')
        }
    }
})

// 封装函数-删除学员信息 
async function del(id) {
    // console.log(id)
    await axios.delete(`http://localhost:3000/result/${id}`)
    render()
}

// 修改信息
document.querySelector('tbody').addEventListener('click', (e) => {
    if (e.target.classList.contains('btn-primary')) {
        const id = e.target.parentNode.parentNode.dataset.id
        edit(id)
    }
})

// 封装函数-修改学员信息
async function edit(id) {
    // console.log(id)
    // 获取信息填到模态框的对应位置
    const res = await axios.get(`http://localhost:3000/result/${id}`)
    console.log(res)
    const arr = ['sname', 'subject', 'sage', 'sgender', 'qualifications']
    const modalForm = document.querySelector('.modal-body')
    // 将id存起来，能够找到要求改的数据
    modalForm.dataset.id = id
    arr.forEach(k => {
        modalForm.querySelector(`[name=${k}]`).value = res.data[k]
    })
    modal.show()
}

// 封装函数-点击保存修改
async function save() {
    // console.log('点击保存修改')
    const form = document.querySelector('.saveForm')
    const data = serialize(form, { hash: true, empty: true })
    // 判断非空
    const { sname, subject, sage, qualifications, sgender } = data
    if (sname === '' || subject === '' || sage === '' || qualifications === '' || sgender === '') {
        alert('请填写要修改的完整信息')
        return
    }
    const modalForm = document.querySelector('.modal-body')
    await axios.put(`http://localhost:3000/result/${modalForm.dataset.id}`, data)
    render()
    modal.hide()
}

// 调用修改函数
document.querySelector('.modal-footer .btn-primary').addEventListener('click', () => {
    save()
})

// 封装模态框
const modalDom = document.querySelector('.modal')
const modal = new bootstrap.Modal(modalDom)
document.querySelector('.close').addEventListener('click', () => {
    modal.hide()
})
document.querySelector('.btn-secondary').addEventListener('click', () => {
    modal.hide()
})